<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />

        <meta name="description" content="Plan Viewer - Presto" />
        <title>Plan Viewer - Presto</title>

        <link rel="icon" href="http://prestodb.io/docs/current/_static/favicon.ico" />

        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
            <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
        <!-- Bootstrap CSS-->
        <link
            href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
            rel="stylesheet"
            integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
            crossorigin="anonymous"
        />
        <!-- Link for btn checkmark-->
        <link
            rel="stylesheet"
            href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
        />
        <!-- jQuery -->
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
        <!-- Sparkline -->
        <script
            type="text/javascript"
            src="https://cdnjs.cloudflare.com/ajax/libs/jquery-sparklines/2.1.2/jquery.sparkline.min.js"
        ></script>

        <link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/vis-timeline/7.7.2/vis-timeline-graph2d.min.css"
        />
        <!-- vis-timeline -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/vis-timeline/7.7.2/vis-timeline-graph2d.min.js"></script>

        <!-- highlight.js -->
        <link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.3.0/styles/solarized-dark.min.css"
            integrity="sha512-BiC3DH0qMCjCYqPNGAthQ95QCndm60uhfQVwhqZ2eG1zuGkP+3T1cw6PzEC4CiRfRIbd2qvyN39RoDfil/XcMA=="
            crossorigin="anonymous"
            referrerpolicy="no-referrer"
        />
        <script
            src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.3.0/highlight.min.js"
            integrity="sha512-NZNzUGlVEXmvVLjUJ7oEDRRmSv1JJwx7bEbi/6tG57xgvEjrO7JYBZCzxUZTF2JRxspUHTSauuC/zR5Yf49YEA=="
            crossorigin="anonymous"
            referrerpolicy="no-referrer"
        ></script>
        <script
            src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.3.0/languages/sql.min.js"
            integrity="sha512-VrCh1D+nBtkZ3950bTV7PQ9i/Os614Zzr0SFmXLokenBXAUggp+KT6BYOwoKqAIADVpDipT5WJN/5AIo/Loi9A=="
            crossorigin="anonymous"
            referrerpolicy="no-referrer"
        ></script>

        <style type="text/css">
            .vis-timeline .item {
                padding: 0px;
            }
            .vis-timeline .labelset .vlabel .inner {
                padding: 0px;
            }
            .vis-timeline .item.range {
                height: 3px;
            }
            .vis-timeline .red {
                background-color: #f2dede;
                border-color: #f2aeae;
            }
            .vis-timeline .green {
                background-color: #dff0db;
                border-color: #b8f0aa;
            }
            .vis-timeline .blue {
                background-color: #e3e9fc;
                border-color: #b0c3fc;
            }
            .vis-timeline .orange {
                background-color: #ffa500;
                border-color: #b0c3fc;
            }
            #legend {
                padding: 10px 40px;
                display: grid;
                grid-template-columns: 1fr 200px 200px 200px 200px 1fr;
            }
            #legend .bar {
                border-style: solid;
                border-width: 1px;
                width: 200px;
                height: 4px;
            }
            #legend .text {
                margin-left: -20px;
            }
            #legend .red {
                background-color: #f2dede;
                border-color: #f2aeae;
            }
            #legend .green {
                background-color: #dff0db;
                border-color: #b8f0aa;
            }
            #legend .blue {
                background-color: #e3e9fc;
                border-color: #b0c3fc;
            }
            #legend .orange {
                background-color: #ffa500;
                border-color: #b0c3fc;
            }
            #legend .empty {
                border-style: none;
            }
        </style>
    </head>

    <body data-bs-theme="dark">
        <!-- Bootstrap JS -->
        <script
            src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
            crossorigin="anonymous"
        ></script>

        <div class="container">
            <div id="title"></div>

            <div id="query-view-container"></div>
        </div>
        <!-- /container -->

        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet" />
    </body>
</html>
